<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能旅游规划助手</title>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.5.10/css/pico.min.css">
    <style>
        :root {
            --primary: #ff6b6b;
            --primary-hover: #ee5253;
            --primary-focus: rgba(255, 107, 107, 0.125);
            --primary-inverse: #FFF;
            --font-family: "PingFang SC", "Microsoft YaHei", -apple-system, system-ui, sans-serif;
            --form-element-active-border-color: var(--primary);
            --form-element-focus-color: var(--primary-focus);
        }
        
        body {
            background-color: #f9f9f9;
            font-family: var(--font-family);
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 20px;
        }
        
        h1, h2 {
            color: var(--primary);
            font-weight: 600;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 2.5rem;
            font-size: 2.2rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        h1::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--primary);
        }
        
        article {
            margin-bottom: 2rem;
            border-radius: 12px;
            background-color: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            transition: all 0.3s ease;
        }
        
        article:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
            transform: translateY(-3px);
        }
        
        article header {
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.8rem;
        }
        
        article h2 {
            margin: 0;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        article h2::before {
            content: "✦";
            margin-right: 10px;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .grid {
            margin-bottom: 1.8rem;
        }
        
        .grid:last-child {
            margin-bottom: 0;
        }
        
        label {
            font-weight: 500;
            color: #444;
            margin-bottom: 0.5rem;
            display: block;
        }
        
        input, select, textarea {
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 12px;
            transition: all 0.2s;
            font-family: var(--font-family);
        }
        
        input:focus, select:focus, textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-focus);
        }
        
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        button.contrast {
            margin-top: 2rem;
            padding: 0.8rem 2rem;
            font-weight: bold;
            border-radius: 50px;
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            font-size: 1.1rem;
            box-shadow: 0 4px 10px rgba(255, 107, 107, 0.2);
        }
        
        button.contrast:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(255, 107, 107, 0.3);
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
            overflow: auto;
        }
        
        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: -15px;
        }
        
        .close:hover,
        .close:focus {
            color: var(--primary);
            text-decoration: none;
        }
        
        .copy-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 1.5rem;
            font-weight: 500;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            transition: all 0.2s;
        }
        
        .copy-btn::before {
            content: "📋";
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .copy-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
        }
        
        #resultText {
            white-space: pre-line;
            margin-top: 1.5rem;
            line-height: 1.8;
            background-color: #f9f9f9;
            padding: 1.5rem;
            border-radius: 8px;
            font-size: 1rem;
        }
        
        .copy-success {
            display: none;
            color: #2ecc71;
            margin-left: 10px;
            font-weight: 500;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <main class="container">
        <header>
            <h1>智能旅游规划助手</h1>
        </header>
        
        <form id="travelForm">
            <!-- 基本信息收集 -->
            <article>
                <header>
                    <h2>基本信息</h2>
                </header>
                
                <div class="grid">
                    <label for="destination">
                        旅行目的地：
                        <input type="text" id="destination" name="destination" placeholder="请输入您想去的国家/城市/地区" required>
                    </label>
                </div>
                
                <div class="grid">
                    <label>旅行时间：</label>
                    <div style="display: flex; gap: 10px;">
                        <div style="flex: 1;">
                            <input type="date" id="start-date" name="start_date" placeholder="开始日期" required>
                        </div>
                        <div style="flex: 1;">
                            <input type="date" id="end-date" name="end_date" placeholder="结束日期" required>
                        </div>
                    </div>
                </div>
                
                <div class="grid">
                    <label for="adults">
                        成人数量：
                        <input type="number" id="adults" name="adults" min="1" value="1" required>
                    </label>
                </div>
                
                <div class="grid">
                    <label for="children">
                        儿童数量：
                        <input type="number" id="children" name="children" min="0" value="0">
                    </label>
                </div>
                
                <div class="grid" id="children-ages" style="display:none;">
                    <label for="children-age-range">
                        儿童年龄段：
                        <input type="text" id="children-age-range" name="children_age_range" placeholder="例如：5岁、8岁">
                    </label>
                </div>
                
                <div class="grid">
                    <label for="elderly">
                        老年人数量：
                        <input type="number" id="elderly" name="elderly" min="0" value="0">
                    </label>
                </div>
                
                <div class="grid" id="elderly-needs" style="display:none;">
                    <label for="elderly-special-needs">
                        老年人特殊需求：
                        <textarea id="elderly-special-needs" name="elderly_special_needs" placeholder="例如：需要无障碍设施，不宜长时间步行"></textarea>
                    </label>
                </div>
            </article>
            
            <!-- 预算范围 -->
            <article>
                <header>
                    <h2>预算范围</h2>
                </header>
                
                <div class="grid">
                    <label for="budget-amount">
                        总体预算（不含国际机票）：
                        <input type="text" id="budget-amount" name="budget_amount" placeholder="请输入您的预算金额">
                    </label>
                </div>
            </article>
            
            <!-- 出行方式与偏好 -->
            <article>
                <header>
                    <h2>出行方式</h2>
                </header>
                
                <div class="grid">
                    <label>目的地内主要交通方式：</label>
                    <div class="grid" style="margin-top: 10px;">
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="transport-public" name="transportation" value="公共交通">
                            <span style="margin-left: 8px;">公共交通</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="transport-car" name="transportation" value="租车自驾">
                            <span style="margin-left: 8px;">租车自驾</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="transport-taxi" name="transportation" value="包车/出租车">
                            <span style="margin-left: 8px;">包车/出租车</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="transport-walk" name="transportation" value="步行">
                            <span style="margin-left: 8px;">步行</span>
                        </label>
                        <label style="display: inline-flex; align-items: center;">
                            <input type="radio" id="transport-bike" name="transportation" value="自行车">
                            <span style="margin-left: 8px;">自行车</span>
                        </label>
                    </div>
                </div>
            </article>
            
            <!-- 景点偏好 -->
            <article>
                <header>
                    <h2>景点偏好</h2>
                </header>
                
                <div class="grid">
                    <label>景点类型偏好（可多选）：</label>
                    <div class="grid" style="margin-top: 10px;">
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="checkbox" id="scenic-nature" name="scenic_preference" value="自然景观">
                            <span style="margin-left: 8px;">自然景观</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="checkbox" id="scenic-culture" name="scenic_preference" value="文化历史">
                            <span style="margin-left: 8px;">文化历史</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="checkbox" id="scenic-modern" name="scenic_preference" value="现代都市">
                            <span style="margin-left: 8px;">现代都市</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="checkbox" id="scenic-art" name="scenic_preference" value="艺术">
                            <span style="margin-left: 8px;">艺术</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="checkbox" id="scenic-shopping" name="scenic_preference" value="购物">
                            <span style="margin-left: 8px;">购物</span>
                        </label>
                        <label style="display: inline-flex; align-items: center;">
                            <input type="checkbox" id="scenic-food" name="scenic_preference" value="美食">
                            <span style="margin-left: 8px;">美食</span>
                        </label>
                    </div>
                </div>
                
                <div class="grid">
                    <label for="must-see">
                        必去的标志性景点列表：
                        <textarea id="must-see" name="must_see" placeholder="例如：故宫、颐和园、长城..."></textarea>
                    </label>
                </div>
                
                <div class="grid">
                    <label>行程节奏：</label>
                    <div class="grid" style="margin-top: 10px;">
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="pace-relaxed" name="pace" value="轻松">
                            <span style="margin-left: 8px;">轻松（每天活动少，充分休息）</span>
                        </label>
                        <label style="display: inline-flex; align-items: center; margin-right: 15px;">
                            <input type="radio" id="pace-moderate" name="pace" value="中等">
                            <span style="margin-left: 8px;">中等（活动与休息平衡）</span>
                        </label>
                        <label style="display: inline-flex; align-items: center;">
                            <input type="radio" id="pace-intense" name="pace" value="紧凑">
                            <span style="margin-left: 8px;">紧凑（尽可能多游览景点）</span>
                        </label>
                    </div>
                </div>
            </article>
            
            <!-- 补充信息 -->
            <article>
                <header>
                    <h2>补充信息</h2>
                </header>
                
                <div class="grid">
                    <label for="additional-info">
                        其他补充信息（特殊需求、饮食偏好、健康限制等）：
                        <textarea id="additional-info" name="additional_info" placeholder="请填写任何其他未包含在上述问题中的旅行需求或偏好"></textarea>
                    </label>
                </div>
            </article>
        </form>
        
        <button id="submitBtn" class="contrast">提交旅行需求</button>
        
        <!-- 弹窗 -->
        <div id="resultModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>您的旅行需求摘要</h2>
                <div id="resultText"></div>
                <button id="copyBtn" class="copy-btn">复制内容</button>
                <span id="copySuccess" class="copy-success">复制成功!</span>
            </div>
        </div>
    </main>

    <script>
        document.getElementById('children').addEventListener('input', function() {
            document.getElementById('children-ages').style.display = this.value > 0 ? 'block' : 'none';
        });
        
        document.getElementById('elderly').addEventListener('input', function() {
            document.getElementById('elderly-needs').style.display = this.value > 0 ? 'block' : 'none';
        });
        
        // 获取弹窗和关闭按钮元素
        const modal = document.getElementById('resultModal');
        const closeBtn = document.getElementsByClassName('close')[0];
        
        // 点击关闭按钮关闭弹窗
        closeBtn.onclick = function() {
            modal.style.display = 'none';
        };
        
        // 点击弹窗外区域关闭弹窗
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        };
        
        // 获取选中的复选框值
        function getCheckedValues(name) {
            const checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
            return Array.from(checkboxes).map(cb => cb.value).join('、');
        }
        
        // 获取单选框值
        function getRadioValue(name) {
            const radio = document.querySelector(`input[name="${name}"]:checked`);
            return radio ? radio.value : '';
        }
        
        // 获取输入框值
        function getInputValue(id) {
            const element = document.getElementById(id);
            return element ? element.value : '';
        }
        
        // 复制功能
        document.getElementById('copyBtn').addEventListener('click', function() {
            const text = document.getElementById('resultText').textContent;
            navigator.clipboard.writeText(text).then(function() {
                const copySuccess = document.getElementById('copySuccess');
                copySuccess.style.display = 'inline';
                setTimeout(function() {
                    copySuccess.style.display = 'none';
                }, 2000);
            });
        });
        
        document.getElementById('submitBtn').addEventListener('click', function(e) {
            e.preventDefault();
            
            // 收集表单数据
            const destination = getInputValue('destination');
            const startDate = getInputValue('start-date');
            const endDate = getInputValue('end-date');
            const adults = getInputValue('adults');
            const children = getInputValue('children');
            const childrenAges = children > 0 ? getInputValue('children-age-range') : '';
            const elderly = getInputValue('elderly');
            const elderlyNeeds = elderly > 0 ? getInputValue('elderly-special-needs') : '';
            const budgetAmount = getInputValue('budget-amount');
            const transportation = getRadioValue('transportation');
            const scenicPreference = getCheckedValues('scenic_preference');
            const mustSee = getInputValue('must-see');
            const pace = getRadioValue('pace');
            const additionalInfo = getInputValue('additional-info');
            
            // 构建结果文本
            let resultText = '';
            if (destination) resultText += `目的地：${destination}\n`;
            
            // 构建旅行时间信息
            if (startDate && endDate) {
                // 计算天数
                const start = new Date(startDate);
                const end = new Date(endDate);
                const days = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1;
                resultText += `旅行时间：${startDate} 至 ${endDate}（${days}天）\n`;
            }
            
            // 构建人员信息
            let peopleInfo = '';
            if (adults && adults > 0) peopleInfo += `${adults}成人`;
            if (children && children > 0) {
                if (peopleInfo) peopleInfo += '、';
                peopleInfo += `${children}儿童`;
                if (childrenAges) peopleInfo += `（${childrenAges}）`;
            }
            if (elderly && elderly > 0) {
                if (peopleInfo) peopleInfo += '、';
                peopleInfo += `${elderly}老人`;
            }
            
            if (peopleInfo) resultText += `人数：${peopleInfo}\n`;
            if (elderlyNeeds) resultText += `老人特殊需求：${elderlyNeeds}\n`;
            
            // 预算信息
            if (budgetAmount) resultText += `总体预算：${budgetAmount}\n`;
            
            // 交通信息
            if (transportation) resultText += `交通方式：${transportation}\n`;
            
            // 景点与活动
            if (scenicPreference) resultText += `景点偏好：${scenicPreference}\n`;
            if (mustSee) resultText += `必去景点：${mustSee}\n`;
            if (pace) resultText += `行程节奏：${pace}\n`;
            
            // 补充信息
            if (additionalInfo) resultText += `补充信息：${additionalInfo}\n`;
            
            // 显示结果
            document.getElementById('resultText').textContent = resultText;
            modal.style.display = 'block';
        });
    </script>
</body>
</html> 